import React, { useReducer, useEffect } from "react";
import "./shop.css"
import { Icon, } from 'antd-mobile';
import { initState, reducer, actions } from "./shop";
import { reqCartlist, reqCartadd, reqCartdelete } from "../../request/api"
const Shop = (props) => {
  const [state, dispatch] = useReducer(reducer, initState);
  let { cartlist, cartadd, cartdelete, tag, onetag } = state
  //进来页面
  useEffect(() => {
    cartList()
  }, []);
  let cartList = () => {
    // 购物车列表
    // 注意传参
    reqCartlist({ uid: JSON.parse(sessionStorage.getItem("user")).uid }).then(res => {
      if (res.data.code === 200) {
        res.data.list.forEach(item => {
          if (item.content) {
            item.content.forEach(i => {
              i.tag = false
            })
          }
        })
        dispatch(actions.changeCartlist(res.data.list))
      }
    })
  }
  let allcheck = () => {
    dispatch(actions.allcheck(!state.tag))
    cartlist[1].content.forEach(item => {
      item.tag = !state.tag
    })
  }
  let check = (index) => {
    cartlist[1].content[index].tag = !cartlist[1].content[index].tag
    dispatch(actions.allcheck(
      cartlist[1].content.every(item => {
        return item.tag
      })
    ))
  }
  let price = cartlist[1]?cartlist[1].content.reduce((allprice, item) => {
    return item.tag?(allprice + item.price * item.num):allprice
  }, 0):0

  let cartAdd = (id) => {
    // 购物车添加
    reqCartadd({ uid: JSON.parse(sessionStorage.getItem("user")).uid, type: 1, goodsid: id, num: 1 }).then(res => {
      if (res.data.code === 200) {
        dispatch(actions.changeCartadd(res.data.list))
        cartList()
      }
    })
  }
  let cartDelete = (id) => {
    // 购物车删除
    // 注意传参
    reqCartdelete({ id: id }).then(res => {
      if (res.data.code === 200) {
        dispatch(actions.changeCartdelete(res.data.list))
        cartList()
      }
    })
  }
  return (
    <div className="pad">
      <ul className="shop_nav">
        <li>
          全部(20)
          <span></span>
        </li>
        <li>
          降价(4)
          <span></span>
        </li>
        <li>
          常卖(2)
          <span></span>
        </li>
        <li>
          分类
          <span></span>
        </li>
      </ul>
      <div className="shop_content">
        <div>
          {
            cartlist[1] ? cartlist[1].content.map((item, index) => (
              <div key={item.id}>
                <input type="checkbox" checked={item.tag} onChange={() => check(index)} />
                <img src={item.img} alt="" />
                <ul>
                  <li>{item.goodsname}</li>
                  <li className="clearfix">
                    <div className="fl">
                      <span>￥{item.price}</span>
                      <span>￥1099</span>
                    </div>
                    <div className="fr">
                      <div className="fl">-</div>
                      <i className="fl">{item.num}</i>
                      <div className="fl" onClick={() => cartAdd(item.goodsid)}>+</div>
                    </div>
                  </li>
                  <li>
                    <button onClick={() => cartDelete(item.id)}>删除</button>
                  </li>
                </ul>
              </div>
            )) : null
          }
        </div>
      </div>
      <div className="bottom1 clearfix">
        <div className="fl">
          <input type="checkbox" checked={state.tag} onChange={() => allcheck()} />
          <span>全选</span>
        </div>
        <ul className="fr clearfix">
          <li className="fr">
            <input type="button" value="结算" />
          </li>
          <li className="fr">
            <p>￥{}</p>
            <p>已优惠￥200元</p>
          </li>
          <li className="fr">
            <p>合计{price.toFixed(2)}</p>
            <p>已免运费</p>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Shop;
